<template>
  <el-container>
    <!-- 头部导航栏 -->
    <el-header>
      <div class="header-left">
        <span>果果狗blog</span>
      </div>
      <div class="header-middle">
        <el-input v-model="searchText" placeholder="请输入搜索内容" clearable @keyup.enter="handleSearch">
          <template #suffix>
            <el-button icon="Search" @click="handleSearch"></el-button>
          </template>
        </el-input>
      </div>
      <div class="header-right">
        <template v-if="isLoggedIn">
          <el-avatar :src="userAvatar" size="small"></el-avatar>
          <span>{{ userName }}</span>
        </template>
        <template v-else>
          <el-button @click="handleLogin">登录</el-button>
          <el-button @click="handleRegister">注册</el-button>
        </template>
      </div>
    </el-header>

    <el-container>
      <!-- 左侧菜单栏 -->
      <el-aside width="200px">
        <el-menu mode="vertical" @select="handleSelect">
          <el-menu-item index="3">博客</el-menu-item>
          <el-menu-item index="4">已上线项目</el-menu-item>
          <el-menu-item index="5">大事记</el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主要内容区域 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>

    <!-- 页脚 -->
    <el-footer>
      <p>浙ICP备2023004818</p>
    </el-footer>
  </el-container>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

// 获取路由实例
const router = useRouter();

// 搜索框输入内容
const searchText = ref('');
// 是否登录
const isLoggedIn = ref(false);
// 用户头像
const userAvatar = ref('');
// 用户姓名
const userName = ref('');

// 处理搜索事件
const handleSearch = () => {
  console.log('搜索内容：', searchText.value);
  // 这里可以添加搜索逻辑，例如跳转到搜索结果页面
};

// 处理登录事件
const handleLogin = () => {
  router.push('/login');
};

// 处理注册事件
const handleRegister = () => {
  router.push('/register');
};

// 处理菜单选择事件
const handleSelect = (key) => {
  switch (key) {
    case '3':
      router.push('/blog');
      break;
    case '4':
      router.push('/projects');
      break;
    case '5':
      router.push('/milestones');
      break;
    default:
      break;
  }
};
</script>

<style scoped>
/* 全局样式，设置字体和背景颜色 */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f4f7fa;
  margin: 0;
}

/* 头部样式 */
.el-header {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 60px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.header-left {
  font-size: 20px;
  font-weight: bold;
}

.header-middle {
  width: 40%;
}

.header-right {
  display: flex;
  align-items: center;
}

.header-right el-button {
  margin-left: 10px;
}

/* 左侧菜单栏样式 */
.el-aside {
  background-color: #f9f9f9;
  border-right: 1px solid #e6e6e6;
}

.el-menu {
  border: none;
}

.el-menu-item {
  color: #333;
  transition: background-color 0.3s ease;
}

.el-menu-item:hover {
  background-color: #e6e6e6;
}

.el-menu-item.is-active {
  background-color: #b1baf3;
  color: #fff;
}

/* 主要内容区域样式 */
.el-main {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 160px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 页脚样式 */
.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 60px;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}
</style>